import './cards.css'
import dayjs from 'dayjs';
import { useState } from 'react';

const date = dayjs().format('YYYY-MM-DD')

// 跑步
const Run = () => {


    return (
        <div className='runCard cardBox' >
            <div className="font">
                <h3>走步</h3>
                <p>3019</p>
                <span>距离达成目标还剩 <span className='cha'>3981</span> 步</span>
            </div>



        </div>
    );
}


// 体重
const Weight = () => {


    return (
        <div className='weightCard cardBox' >
            <h3>体重 <span className='time'> {date} </span> </h3>
            <div className='fontBox'>
                <div className="tiZhong">
                    <p>体重(kg)</p>
                    <p className='zhi'>73.1</p>
                </div>
                <div className="tiZhi">
                    <p>体脂</p>
                    <p className='zhi'>21.4%</p>
                </div>

            </div>
        </div>
    );
}


// 睡眠
const Sleep = () => {

    return (
        <div className='cardBox sleepCard' >
            <h3>睡眠 <span className='time'> {date} </span></h3>
            <div className="fontTop">
                <span>深睡：5小时00分钟</span>
                <span>清醒：40分钟</span>
            </div>
            <div className="zhuSleep">
                <div className="deep"></div>
                <div className="excess"></div>
                <div className="week"></div>
            </div>
            <div className="fontBottom">
                <span>浅睡：1小时20分钟</span>
            </div>

        </div>
    );
}


// 心率
const Heart = () => {

    return (
        <div className='cardBox heartCard' >
            <h3>心率 <span className='time'>{date}</span></h3>

            <div className="heartZhi">
                <span>72次/分钟</span>
                <hr />
                <p>心率正常</p>
            </div>
        </div>
    );
}


export { Run, Weight, Sleep, Heart };